﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FooTable - jQuery plugin for responsive HTML tables</title>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
	<link href="../css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css"/>
    <link href="css/footable-demos.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script>
        if (!window.jQuery) { document.write('<script src="js/jquery-1.9.1.min.js"><\/script>'); }
    </script>
    <script src="../js/footable.js?v=2-0-1" type="text/javascript"></script>
	<script src="../js/footable.sort.js?v=2-0-1" type="text/javascript"></script>
	<script src="../js/footable.filter.js?v=2-0-1" type="text/javascript"></script>
	<script src="../js/footable.paginate.js?v=2-0-1" type="text/javascript"></script>
	<script src="js/bootstrap-tab.js" type="text/javascript"></script>
    <script src="js/data-generator.js" type="text/javascript"></script>
    <script src="js/jquery.mockjax.js" type="text/javascript"></script>
    <script src="js/demos.js" type="text/javascript"></script>
</head>
<body>
	<div class="demo-container">
        <ul class="breadcrumb">
            <li><a href="http://fooplugins.com/plugins/footable-jquery/-jquery/">FooTable</a> <span class="divider">&raquo;</span></li>
            <li><a href="index.htm">Demos</a> <span class="divider">&raquo;</span></li>
            <li class="active">Ajax</li>
        </ul>
        <div class="alert">
            Change your table data using AJAX and then reinitialize your FooTable.
        </div>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#demo">Demo</a></li>
			<li><a href="#docs">Docs</a></li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane active" id="demo">
                <p><a href="#" class="get_data">Load more data via ajax</a></p>
                <p>
                    Search: <input id="filter" type="text"/>
                    Status: <select class="filter-status">
                        <option></option>
                        <option value="active">Active</option>
                        <option value="disabled">Disabled</option>
                        <option value="suspended">Suspended</option>
                    </select>
                    <a href="#clear" class="clear-filter" title="clear filter">[clear]</a>
                </p>
				<table class="table demo" data-filter="#filter" data-page-size="7">
					<thead>
						<tr>
							<th data-toggle="true">
								First Name
							</th>
							<th>
								Last Name
							</th>
							<th data-hide="phone,tablet">
								Job Title
							</th>
							<th data-type="numeric" data-hide="phone,tablet">
								DOB
							</th>
							<th data-hide="phone">
								Status
							</th>
						</tr>
					</thead>
					<tbody>
                        <script type="text/javascript">
                            window.generateRows(5);
                        </script>
					</tbody>
					<tfoot class="hide-if-no-paging">
						<tr>
							<td colspan="5">
								<div class="pagination pagination-centered"></div>
							</td>
						</tr>
					</tfoot>
				</table>
			</div>
			<div class="tab-pane" id="docs">
                <h4>Refresh After Populating By Ajax</h4>
                <p>You can easily tell Footable to redraw by triggering the <code>footable_redraw</code> event on the table:
                    <pre>$(&#39;.get_data&#39;).click(function() {
	$.ajax({
		url : &#39;/some/api&#39;,
		success : function(data) {
			$(&#39;table tbody&#39;).append(data).trigger(&#39;footable_redraw&#39;);
		}
	});
});</pre>
                </p>
			</div>
		</div>
	</div>
    <script type="text/javascript">
        $.mockjax({
            url: '/some/api',
            dataType: 'html',
            response: function() {
                this.responseText = window.generateRows(5,0,true);
            }
        });

        $(function () {

			$('table').footable();

            $('.clear-filter').click(function (e) {
                e.preventDefault();
                $('table.demo').trigger('footable_clear_filter');
				$('.filter-status').val('');
            });

            $('.filter-status').change(function (e) {
                e.preventDefault();
				var filter = $(this).val();
                $('#filter').val('');
                $('table.demo').trigger('footable_filter', {filter: filter});
            });

            $('.get_data').click(function() {
                $.ajax({
                    url : '/some/api',
                    success : function(data) {
                        $('table tbody').append(data);
                        $('table').trigger('footable_redraw');
                    }
                });
            });

        });
    </script>
</body>
</html>
